/**
 * Created by Administrator on 2018/5/10.
 */
define(function (require,exports,module) {
    require("./gante.css");
   var flatTupo=require("./flatTupo/flatTupo.js")
    require("../../lib/fullcalendar/moment.min.js");
    var sTpl = require("./template.html");
    var VueComponent = Vue.extend({
        template: sTpl,
        components:{
            flatTupo:flatTupo
        },
        data:function () {
            var form={
                startDate:'',
                endDate:'',
                flightNum:'',
                flightInfoId:''
            }
            return {
               form:form,
                flatTupo:{
                   flats:[]
                },
                flats:[],
                jsLoaded:false,
                dataLoaded :false,
                checkForm:{
                    all:false,
                    isImport:false,
                    export:false,
                    abnormal:false,
                    normal:false,
                    overtime:false,
                    flightNum:""
                },
            };

        },
        watch:{
            'checkForm.all':function (nv) {
                this.checkForm.isImport=nv;
                this.checkForm.export=nv;
                this.checkForm.abnormal=nv;
                this.checkForm.normal=nv;
                this.checkForm.overtime=nv;
            },
            'jsLoaded':function(nv,ov){

                if(nv&&this.dataLoaded){
                    this.pie();
                    this.monitor();
                }

            }
            ,
            'dataLoaded':function (nv,ov) {
                if(nv&&this.jsLoaded){
                    this.pie();
                    this.monitor();
                }
            }
        },
        methods:{
            loadJs:function () {
                var $this = this;
                require.async("../../lib/echarts.min.js",function (data) {
                    $this.jsLoaded=true;
                });
            },
            pie:function () {
                option = {
                    title : {
                        text: '机位占用情况',
                        subtext: '',
                        x:'center',
                        textStyle:{
                            color:'#edfbfc',
                            fontSize:'15'
                        }
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },


                    calculable : true,
                    series : [

                        {
                            name:'面积模式',
                            type:'pie',
                            radius : [30, 80],
                            roseType : 'area',
                            data:[
                                {value:10, name:'已分配'},
                                {value:20, name:'已分配未占用'},
                                {value:15, name:'未分配'},


                            ]
                        }
                    ]
                };
                var pie = document.getElementById("pie");
                var myChart =  echarts.init(pie,'light');
                myChart.setOption(option,true);

            },
            monitor: function (schedules) {
                var $this = this;
                var dom = document.getElementById("father");
                var myChart = echarts.init(dom,'dark');//,{renderer: 'svg'}
                var app = {};
                option = null;
                var data = [];
                var length=24;
                var min = new Date(moment().format("YYYY-MM-DD")+" 00:00:00").getTime();
                var max = min+length*3600*1000;

                var  types= ['distribution-Occupy','distribution-unOccupy','unDistribution'];
                var colors=['#37a2da','#67e0e3','#ffdb5c'];
                categories =[];
                 this.flatTupo.flats.forEach(function (val,i) {
                     var index=parseInt(Math.random()*3);
                     categories.push(val.gpName)
                     var gatePODs =  val.gatePODs;
                     gatePODs.sort(function (val,val2) {
                         if(val.distributionTime&&val2.distributionTime){
                             return  val.distributionTime>val2.distributionTime?1:-1
                         }
                         if(val.occupyTime&&val2.occupyTime){
                             return  val.occupyTime>val2.occupyTime?1:-1;
                         }
                     });
                     if(gatePODs){
                         gatePODs.forEach(function (val) {
                             var start1Time,startTime,endTime;
                             if(val.distributionTime){
                                 start1Time = new Date( val.distributionTime).getTime();
                             }
                             if(val.occupyTime){
                                 startTime = new Date(val.occupyTime).getTime();
                             }
                             if(val.leaveTime){
                                 endTime = new Date(val.leaveTime).getTime();
                             }else{
                                 endTime = new Date().getTime();
                             }
                             var end1Time=startTime?startTime:(new Date().getTime());
                             data.push({
                                 name: val.flightInfoPo.flightNum,
                                 type:types[index],
                                 value: [
                                     i,
                                     start1Time,
                                     end1Time,
                                     startTime,
                                     endTime,
                                     val.flightInfoPo.flightNum
                                 ],
                                 itemStyle: {
                                     normal: {color:colors[0]}
                                 }
                             })

                         });

                     }
                 });

                function renderItem(params, api) {
                    var categoryIndex = api.value(0);
                    var barH=api.size([0, 1])[1]*0.9;
                    var height = barH -barH/4;
                    var styles=[{stroke:'#363651',fill:'#363651'},{stroke:'#2c2c46',fill:'#2c2c46'}];
                        var start1Time=api.value(1),
                        end1Time = api.value(2),
                        startTime=api.value(3),
                        endTime=api.value(4), flightNum = api.value(5)

                    var returnData= {
                        type: 'group',
                        id: 'textGroup2',
                        bounding:'raw',
                        left: 65,
                        width:params.coordSys.x,
                        progressive:true,
                        children:[]
                    }
                    var start1,start,end;
                    start1 = api.coord([start1Time, categoryIndex]);
                    start = api.coord([startTime, categoryIndex]);
                    end = api.coord([endTime, categoryIndex]);

                    var children =   [

                        {
                            type: 'circle',
                            shape: {
                                cx: start[0],
                                cy: start[1],
                                r: start[0]-height/2<params.coordSys.x?0:height/2,
                            }
                            ,style:{stroke:api.style().fill,fill:api.style().fill}
                        },
                        {
                            type: 'circle',
                            shape: {
                                cx: end[0],
                                cy: end[1],
                                r: end[0]-height/2<params.coordSys.x?0:height/2
                            }
                            ,style:{stroke:api.style().fill,fill:api.style().fill}
                        },
                        {
                            type: 'rect',
                            shape:{

                                x: start[0]>params.coordSys.x?start[0]:params.coordSys.x,
                                y: start[1] - height / 2,
                                width: end[0]-(start[0]>params.coordSys.x?start[0]:params.coordSys.x)>0?end[0]-(start[0]>params.coordSys.x?start[0]:params.coordSys.x):0,
                                height: height
                            },
                            silent:false,
                            onmouseover:function () {
                                console.log("fuck")
                            },
                            onclick:function () {
                                console.log("fuck")
                            }
                            ,style:{stroke:api.style().fill,fill:api.style().fill}

                        },



                        {
                            type:'text',
                            style:{
                                text:moment(startTime).format("HH:mm"),
                                fill:start[0]>params.coordSys.x?'#000':"rgba(0,0,0,0)",
                                x: start[0],
                                y: start[1]-height/4
                            }
                        },{
                            type:'text',
                            style:{
                                text:flightNum,
                                fill:start[0]+(end[0] - start[0])/2-(end[0] - start[0])/8>params.coordSys.x?'#000':"rgba(0,0,0,0)",
                                x: start[0]+(end[0] - start[0])/2-(end[0] - start[0])/8,
                                y: start[1] - height/4
                            }
                        }
                        ,{
                            type:'text',
                            style:{
                                text:moment(endTime).format("HH:mm"),
                                fill:end[0]-30>params.coordSys.x?'#000':"rgba(0,0,0,0)",
                                x: end[0]-30,
                                y: start[1] - height/4
                            }
                        },
                        {
                            type: 'rect',
                            shape: {
                                x: start[0]-4,
                                y: start[1]-2,
                                width:start[0]-4>params.coordSys.x?4:0,
                                height: 4
                            }
                            ,style:styles[categoryIndex%2]

                        },
                        {
                            type: 'rect',
                            shape:{
                                x: end[0]+4,
                                y: start[1]-2,
                                width: end[0]+4>params.coordSys.x?4:0,
                                height: 4
                            }
                            ,style:styles[categoryIndex%2]

                        }]

                    if(start1){
                        if(!start){
                            start = api.coord([new Date().getTime(), categoryIndex])
                        }
                        children.unshift(
                            {
                                type: 'rect',
                                shape: {
                                    x: start1[0]-4,
                                    y: start1[1]-2,
                                    width:start1[0]-4>params.coordSys.x?4:0,
                                    height: 4
                                }
                                ,style:styles[categoryIndex%2]

                            })
                        children.unshift({
                            type:'text',
                            style:{
                                text:moment(start1Time).format("HH:mm"),
                                fill:start1[0]>params.coordSys.x?'#000':"rgba(0,0,0,0)",
                                x: start1[0],
                                y: start1[1]-height/4
                            }
                        })
                        children.unshift({
                            type: 'rect',
                            shape:{
                                x: start1[0]>params.coordSys.x?start1[0]:params.coordSys.x,
                                y: start1[1] - height / 2,
                                width: start[0]-(start1[0]>params.coordSys.x?start1[0]:params.coordSys.x)>0?start[0]-(start1[0]>params.coordSys.x?start1[0]:params.coordSys.x):0,
                                height: height
                            }
                            ,style:{stroke:colors[1],fill:colors[1]}

                        })
                        children.unshift( {
                            type: 'circle',
                            shape: {
                                cx: start1[0],
                                cy: start1[1],
                                r: start1[0]-height/2<params.coordSys.x?0:height/2,
                            }
                            ,style:{stroke:colors[1],fill:colors[1]}
                        })
                    }
                    returnData.children = children;
                    return returnData;

                }

                option = {
                    tooltip: {
                        formatter: function (params) {
                            return params.marker + params.name+"分配时间 "+ moment(params.value[1]).format("HH:mm") +"  开始占用："+moment(params.value[3]).format("HH:mm")+"  占用结束："+moment(params.value[4]).format("HH:mm");
                        }
                    },
                    dataZoom: [
                        {
                            //type:'inside',
                           show: true,
                            realtime: false,
                            start: 0,
                            end: 30,
                            filterMode:'empty'
                        }
                    ],
                    realtime: true,
                    title: {
                        text: '',
                        left: 'center'
                    },
                    backgroundColor:'#282840',
                    grid: {
                         top:"20",
                         left:'65',
                        // bottom:'200',
                        // right:'0%',
                        width:"100%",
                        height:"90%"
                    },
                    xAxis: {
                        min:min,
                        max:max,
                        scale: true,
                        type:'time',
                        interval:1000*600*2,
                        splitNumber:8,
                        splitLine:{
                            show:true,
                            lineStyle:{
                                type:"solid"
                            },

                        }
                        ,axisLabel: {
                            formatter: function (val) {
                                // if(val%(3600*1000)==0){
                                    return moment(val).format("HH:mm")
                                // }
                            }
                        }
                    },
                    yAxis: {
                        data: categories,
                        splitLine:{
                            show:false,
                            color:['#363651','#2c2c46'],
                            width:0,
                            lineStyle:{
                                // type:"solid"
                            },

                        },
                        splitArea: {
                            show: true,
                            areaStyle:{
                                color:['#363651','#2c2c46']
                            },
                            shadowBlur:20
                        },
                        shadowColor: 'rgba(255, 255, 255, 1)',
                        shadowBlur: 200
                    },
                    series: [
                        {
                        type: 'custom',
                        renderItem: renderItem,
                        itemStyle: {
                            normal: {
                                opacity: 0.8
                            }
                        },
                        encode: {
                            x: [1, 2],
                            y: 0
                        },
                        data: data
                    }]
                };
                // if(!baseTime){
                //     baseTime =new Date(moment().format("YYYY-MM-DD")+" 00:00:00").getTime() ;
                //     option.xAxis.min=baseTime;
                //     option.xAxis.max=baseTime+24*3600*1000-1000;
                // }


                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                    // setInterval(function(){
                    //     data.forEach(function (da) {
                    //         if(da.type!="end"){
                    //             da.value[2]+=1000;
                    //         }
                    //
                    //     })
                    //     myChart.setOption(option, true);
                    // },1000)
                }

                myChart.on('click', function (params) {
                  console.log(123)

                })

            },
            allFlight:function () {
                $("#container").hide();
                $("#father").show();
            },
            queryFlightPlane:function(val){
                var beforeHour=4;
                var afterHour=16;
                if(val){
                   var date= val;
                   var now =  new Date().getTime();
                   beforeHour =  (now -date)/1000/3600;
                   beforeHour =  parseInt(beforeHour);
                   afterHour  =  -(beforeHour - 24);
                }
                if(val){

                }
                axios.get(basepath +"/api/flightPlane/queryScheduleToday?beforeHour="+beforeHour+"&afterHour="+afterHour+"").then(function (response) {
                    // father(response.data)
                })
            }

        },
        mounted:function () {
          this.loadJs();
        },
        created:function () {
            var $this = this;
            axios.get(basepath+"/api/sysSetting/findAllGpWidthCurrentFlight").then(function (response) {
                var data = response.data;
                axios.get(basepath+"/api/sysSetting/findAllGpWidthCurrentFlightAndGatePOD").then(function (response) {
                    var map={}
                    data.forEach(function (val) {
                        map[val.gpId]=val;
                         val.gatePODs=[];
                    })

                    $this.flatTupo.flats = data;
                    response.data.forEach(function(val){
                        map[val.gpId].gatePODs=val.gatePODs
                        console.log(val.gatePODs);
                    })

                    $this.dataLoaded = true;
                })

            })

        },
        activated:function (){
            messages.$emit('change','机坪监控');


        }
    })
    //机务检测 特种服务 清洁安排 加油安排 加水安排 配餐安排 行李搬运
    module.exports = VueComponent;

    return VueComponent;
});













function abc(schedule) {
    var dom = document.getElementById("container");
    // $("#app").attr("style","background:#333")
    var myChart = echarts.init(dom,'light');
    var app = {};
    option = null;
    var data = [];
    var dataCount = 1;
    var baseTime = new Date().getTime();
    var itemMap={'配餐服务':['配餐'],'清洁服务':['保洁'],
        '机务检测':['监护','勤务','上轮当','下客','关舱门','关闭货仓','撤轮档'],
        '特种服务':['摆渡车','除冰'],
        '加油服务':['加油'],
        '行李搬运':['卸货'],
        '加水服务':['加水'],
    }

    var categories = [];
    schedule[1].schedulings.forEach(function(da){
        if(itemMap[da.groundServiceItemPo.itemName]){
            categories=categories.concat(itemMap[da.groundServiceItemPo.itemName])
        }
       });
    categories.sort();
    var types =
        {end:{name: 'end', color: 'white'},loading:{name: 'loading', color: 'yellow'}};
    schedule[1].schedulings.forEach(function(da){
        if(itemMap[da.groundServiceItemPo.itemName]){
            itemMap[da.groundServiceItemPo.itemName].forEach(function (categorie) {
                var index=categories.indexOf(categorie);
                if(da.startDate){
                    var typeItem ='loading';
                    var startTime = new Date(da.startDate).getTime();
                    baseTime = startTime<baseTime?startTime:baseTime;
                    var endTime = new Date().getTime()-100;
                    if(da.endDate){
                        typeItem ='end';
                        endTime=new Date(da.endDate);
                    }
                    data.push({
                        name: categorie,
                        type:typeItem,
                        value: [
                            index,
                            startTime,
                            endTime,
                            endTime-startTime
                        ],
                        itemStyle: {
                            normal: {
                                color:types[typeItem].color,
                            }
                        }
                    });
                }
            })
        }
    })








    function renderItem(params, api) {
        var categoryIndex = api.value(0);
        var start = api.coord([api.value(1), categoryIndex]);
        var end = api.coord([api.value(2), categoryIndex]);
        var height = 2;

        return  {
            type: 'group',
            id: 'textGroup2',
            left: start[0],
            bottom:start[1] - height / 2,
            children: [
                {
                    type: 'line',
                    shape: {
                        x1: start[0],
                        y1: start[1],
                        x2: end[0],
                        y2: end[1]
                    }
                     ,style:{stroke:'#000 ',  lineWidth:height}
                },
                {
                    type: 'ring',
                    shape: {
                        cx: start[0],
                        cy: start[1],
                        r0: height*2,
                        r1: height
                    }
                    ,style:{stroke:'#000 ',fill:'rgb(245, 245, 245)',  lineWidth:height}
                },
                {
                    type: 'ring',
                    shape: {
                        cx: end[0],
                        cy: end[1],
                        r0: height*2,
                        r1: height
                    }
                    ,style:{stroke:'#000 ',fill:'rgb(245, 245, 245)',  lineWidth:height}
                }

            ]
        }
    }

    baseTime = baseTime-50*60*1000;

    option = {
        tooltip: {
            formatter: function (params) {
                return params.marker + params.name + ': ' + moment(params.value[1]).format("HH:mm") + '-'+moment(params.value[2]).format("HH:mm");
            }
        },
        title: {
            text: schedule[0].flightInfo.flightNum+'运行状态',
            left: 'center'
        },

        grid: {
            height:400
        },
        xAxis: {
            min: baseTime,
            scale: true,
            // max:new Date().getTime()+1000000*4,
            type:'time',
            axisLabel: {
                formatter: function (val) {
                    return moment(val).format("HH:mm")
                    //return Math.max(0, val - startTime) + ' ms';
                }
            }
        },
        yAxis: {
            data: categories
        },
        series: [{
            type: 'custom',
            renderItem: renderItem,
            itemStyle: {
                normal: {
                    opacity: 0.8
                }
            },
            encode: {
                x: [1, 2],
                y: 0
            },
            data: data
        }]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
        setInterval(function(){
            data.forEach(function (da) {
                if(da.type!="end"){
                    da.value[2]+=1000;
                }

            })
            myChart.setOption(option, true);
        },1000)
    }



}





















